import { PropsWithChildren } from 'react';
import { DndContext, useDroppable, useDraggable } from '@dnd-kit/core';
import { Card } from 'antd';

const Draggable = (props: PropsWithChildren) => {
	const { attributes, listeners, setNodeRef, transform } = useDraggable({
		id: 'draggable'
	});
	const style = transform
		? {
				transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
		  }
		: undefined;

	return (
		<button ref={setNodeRef} style={style} {...listeners} {...attributes}>
			{props.children}
		</button>
	);
};

const Droppable = (props: PropsWithChildren) => {
	const { isOver, setNodeRef } = useDroppable({
		id: 'droppable'
	});
	const style = {
		color: isOver ? 'green' : undefined
	};

	return (
		<div ref={setNodeRef} style={style}>
			{props.children}
		</div>
	);
};

const Base = () => {
	return (
		<Card>
			<DndContext>
				<Draggable>aaa</Draggable>
				<Droppable>bbb</Droppable>
			</DndContext>
		</Card>
	);
};

export default Base;
